<template>
  <div class="schedule-meeting">
    <!-- 使用 t('createConf.scheduleMeetingTitle') 获取翻译文本 -->
    <h1 class="title">{{ t('createConf.scheduleMeetingTitle') }}</h1>
    
    <el-form 
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="top"
      class="meeting-form"
    >
      <!-- 会议主题 -->
      <el-form-item :label="t('createConf.meetingTopicPlaceholder')" prop="title" required>
        <el-input v-model="form.title" :placeholder="t('createConf.meetingTopicPlaceholder')" />
      </el-form-item>

      <!-- 会议时间 -->
      <el-form-item :label="t('createConf.meetingTime')" required>
        <div class="time-picker-group">
          <el-date-picker
            v-model="form.startDate"
            type="date"
            :placeholder="t('createConf.chooseDate')"
            format="YYYY/MM/DD"
          />
          <el-time-select
            v-model="form.startTime"
            :placeholder="t('createConf.chooseTime')"
            start="00:00"
            step="00:30"
            end="23:30"
          />
        </div>
      </el-form-item>

      <!-- 会议时长 -->
      <el-form-item :label="t('createConf.meetingDuration')" required>
        <el-select v-model="form.duration" :placeholder="t('createConf.chooseDuration')">
          <el-option label="30分钟" value="30" />
          <el-option label="1小时" value="60" />
          <el-option label="1.5小时" value="90" />
          <el-option label="2小时" value="120" />
          <el-option label="更长时间" value="longer" />
        </el-select>
      </el-form-item>

      <!-- 会议标签 -->
      <el-form-item :label="t('createConf.meetingTags')" required>
        <el-select v-model="form.tags" multiple :placeholder="t('createConf.chooseTags')">
          <el-option
            v-for="tag in tags"
            :key="tag.value"
            :label="tag.label"
            :value="tag.value"
          />
        </el-select>
      </el-form-item>

      <!-- 参会方式 -->
      <el-form-item :label="t('createConf.participationMode')" required>
        <el-radio-group v-model="form.participationMode">
          <el-radio label="online">{{ t('createConf.online') }}</el-radio>
          <el-radio label="offline">{{ t('createConf.offline') }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 线下会议详情 -->
      <div v-if="form.participationMode === 'offline'">
        <el-form-item :label="t('createConf.meetingLocation')">
          <el-input v-model="form.location" :placeholder="t('createConf.meetingLocation')" />
        </el-form-item>
        <el-form-item :label="t('createConf.meetingRules')">
          <el-input v-model="form.rules" :placeholder="t('createConf.meetingRules')" />
        </el-form-item>
        <el-form-item :label="t('createConf.cateringService')">
          <el-input v-model="form.catering" :placeholder="t('createConf.cateringService')" />
        </el-form-item>
      </div>

      <!-- 上传会议资料 -->
      <el-form-item :label="t('createConf.uploadMeetingMaterials')">
        <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          ref="upload"
        >
          <el-button type="primary">{{ t('createConf.uploadFileButton') }}</el-button>
        </el-upload>
      </el-form-item>

      <!-- 会议设置 -->
      <el-form-item :label="t('createConf.meetingSettings')">
        <div class="settings-group">
          <el-checkbox v-model="form.settings.allowRecord">{{ t('createConf.allowRecord') }}</el-checkbox>
          <el-checkbox v-model="form.settings.allowReplay">{{ t('createConf.allowReplay') }}</el-checkbox>
          <el-checkbox v-model="form.settings.isPublic">{{ t('createConf.isPublic') }}</el-checkbox>
        </div>
      </el-form-item>
    </el-form>

    <!-- 底部按钮 -->
    <div class="form-actions">
      <el-button type="primary" @click="submitForm">{{ t('createConf.scheduleButton') }}</el-button>
      <el-button @click="goBack">{{ t('createConf.backButton') }}</el-button>
    </div>
  </div>
</template>



<script setup lang="ts">
import {t} from '../../../../locales/index'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

const formRef = ref<FormInstance>()

const form = reactive({
  title: '',
  startDate: '',
  startTime: '',
  duration: '', // 会议时长
  tags: [] as string[], // 会议标签（多个）
  participationMode: 'online' as 'online' | 'offline', // 参会方式
  location: '', // 会议地点
  rules: '', // 会场规则
  catering: '', // 餐饮服务
  settings: {
    allowRecording: false,
    allowReplay: false,
    isPublic: false,
  },
  file: null, // 上传文件字段
})

const tags = ref<Array<{ label: string; value: string }>>([]) // 标签列表

const rules: FormRules = {
  title: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
  startDate: [{ required: true, message: '请选择会议时间', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择会议时间', trigger: 'change' }],
  tags: [{ required: true, message: '请选择会议标签', trigger: 'change' }],
  participationMode: [{ required: true, message: '请选择参会方式', trigger: 'change' }],
}

const submitForm = async () => {
  if (!formRef.value) return

  // 表单验证
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      // 确保 participationMode 是 "online" 或 "offline"
      if (form.participationMode !== 'online' && form.participationMode !== 'offline') {
        console.error("参会方式必须是 'online' 或 'offline'")
        return
      }

      try {
        // 模拟提交表单数据
        console.log('提交的会议数据：', form)
        ElMessage.success("会议创建成功")
      } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error('会议创建失败')
      }
    } else {
      console.error('验证失败:', fields)
    }
  })
}

const goBack = () => {
  window.history.back()
}

onMounted(() => {
  // 使用模拟数据替代 API 请求
  tags.value = [
    { label: '人工智能', value: 'AI' },
    { label: '商务工作', value: 'Business' },
    { label: '农业', value: 'Agriculture' },
    { label: '美术艺术', value: 'Art' },
    { label: '电子科技', value: 'Tech' },
    { label: '家具服务', value: 'Furniture' },
    { label: '其他', value: 'Other' }
  ]
})
</script>




<style scoped lang="scss">
.schedule-meeting {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  .title {
    font-size: 24px;
    margin-bottom: 30px;
    color: var(--el-text-color-primary);
  }

  .meeting-form {
    :deep(.el-form-item) {
      margin-bottom: 24px;
    }
  }

  .time-picker-group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;

    .separator {
      color: var(--el-text-color-secondary);
    }
  }

  .settings-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .form-actions {
    margin-top: 40px;
    display: flex;
    gap: 16px;
  }
}
</style>
